<template>
 <div>
    <div>付款記錄</div>
        <ProTable
                :data="list"
                :page="{}"
                :column="column"
                :rowControl="[]"
                :elProps="{
                  border:true
                }"
                :disabled="[]"
                :controlWidth="[]"
                >
                <template #default="{ row, propname }">
                    <div v-if="propname === 'school'">
                          <div>{{row[propname]?.name}}</div>
                    </div>
                </template>
                </ProTable>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.page" :page-size="page.limit" layout="total, prev, pager, next"
                :total="page.total">
                </el-pagination>
 </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {arrearage} from '@/http/index.js'
const column = {
  school_name:'學校名稱',
  create_time:'發票日期',
  number:'發票編號',
  name:'項目',
  num:'數量',
  price:'付款',
}
const form = reactive({
    student_id:'',
    pay:'2',
})
const page = reactive({page: 1,limit: 15,total: 0})
const init = (data) => {
    form.student_id = data.id
    console.log(data);
    tableList()
}
const list = ref([])
const tableList  =async()=>{
  let obj = Object.assign(form,page)
  delete obj.total
  const data = await arrearage(obj)
  if (data.code == 200) {
        list.value = data.data.data
    page.total = data.data.total
  }
}
   const handleSizeChange=(size)=> {
        page.limit = size
        tableList()
      }
      const handleCurrentChange=(currentPage)=> {
        page.page = currentPage
        tableList()
      }
defineExpose({
  init,
})
</script>

<style scoped lang='less'>

</style>